import { Component } from "react/cjs/react.production.min";
import { Input, Button } from "@mui/material";
import DeleteIcon from "@mui/icons-material/Delete";
import AddIcon from "@mui/icons-material/Add";
import NewTodoDiglog from "../newtododiglog/newtododiglog.component";
class AddTodo extends Component {
  constructor() {
    super();
    this.state = {
      open: false,
    };
  }

  onClick() {
    this.setState({ open: true });
  }
  handleNewTodo(newTodo) {
    this.setState({ open: false });
    this.props.onAddTodoHandler(newTodo.todo_title);
  }
  render() {
    return (
      <div className="addtodo">
        <Button
          startIcon={<AddIcon />}
          variant="contained"
          onClick={this.onClick.bind(this)}
        >
          添加
        </Button>
        <NewTodoDiglog
          open={this.state.open}
          onCancel={() => {
            this.setState({ open: false });
          }}
          onNewTodo={this.handleNewTodo.bind(this)}
        />
      </div>
    );
  }
}

export default AddTodo;
